<template>
    <div >
       <!-- <div class="quan">
            <img @click="quanxuan" :class="{active:isSelectAll}" src="assets/img/cart/tick.svg" alt="">
            <span>全选</span>
        </div>
        <div class="heji">

        </div>
        <div class="jisuan">付款: {{checkedLength}}</div>-->
        <van-submit-bar
                plain
                button-text="提交订单"
                @submit="goumai"
                class="cart-bottom"
        >
         <span slot="default" class="default">
             <label  :class="{checkbox:isSelectAll}" @click="quanxuan" class="checkbox">
             <input type="checkbox" >全选
             </label>
             <span>
             合计:
                 <span class="jiage">
                {{totalPrice}}
                     </span>
                 </span>
            </span>
        </van-submit-bar>
    </div>
</template>
<script>
    export default {
        name:'CartBottomBar',
        data(){
            return{
                totalprice: 0
            }
        },
        methods: {
            onSubmit() {

            },
            quanxuan(){
                 if(this.isSelectAll){
                     this.$store.state.cartList.forEach(item=>item.checked=false)
                 }else{
                     this.$store.state.cartList.forEach(item=>item.checked=true)
                 }
            },
            goumai(){
                if(!this.checkedLength){
                    this.$toast('请选择购买的物品');
                }
            }
        },
        computed: {
            totalPrice(){
                return '￥'+ this.$store.state.cartList.filter(item=>{
                    return item.checked
                }).reduce((preValue,item)=>{
                    return this.totalprice = preValue+item.price * item.count
                },0)
            },
            checkedLength(){
                return this.$store.state.cartList.filter(item=>item.checked).length
            },
            isSelectAll(){
                return !(this.$store.state.cartList.filter(item=>!item.checked).length)
            }
        },
    }
</script>
<style  scoped>
    .cart-bottom{
        height: 45px;
        background: #eee;
        position: fixed;
        bottom: 50px;
        right: 0;
        left: 0;
        line-height: 45px
    }
    .checkbox{
        margin-right: 30px;
        box-sizing: border-box;
    }
    .checkbox [type='checkbox']{
        margin-left: 10px;
        margin-right: 8px;
        width: 14px;
        height: 14px;
        background-color: #fff;
        -webkit-appearance:none;
        border: 1px solid #c9c9c9;
        border-radius: 2px;
        outline: none;
    }
    .checkbox [type='checkbox']:checked{
        background: url("~assets/img/check.jpg")no-repeat center center;
        background-size: 30px;
    }
    .default{
        width: 280px;
    }
    .jiage{
        color: red;
    }
   /* .quan{
        height: 100%;
        font-size:16px ;
        color: thistle;
        width: 30%;
    }
    .quan img{
        border-radius: 50%;
        border: 1px  solid pink;
        margin:0 10px;
    }
    .heji{
        color: salmon;
        width: 30%;
    }
    .jisuan{
        color:papayawhip;
        margin-left:10% ;
        width: 30%;
        background: red;
        text-align: center;
        font-size: 18px;
    }
    .active{
        background: tomato;
    }*/


</style>